<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="false"
      :background="{ background: '#fff' }"
      title="我的"
      title-color="#000"
    >
    </u-navbar>
    <view class="top">
      <view class="header" v-if="userInfo.id">
        <image class="avatar" :src="userInfo.avatar"></image>
        <view style="display: flex;justify-content:space-between;width: 70%;">
          <view>
            <view style="font-weight: bold;font-size: 30rpx;margin-bottom: 20rpx;">{{userInfo.name}}</view>
            <view style="color: #666;margin-bottom: 20rpx;">手机号: {{userInfo.phone}}</view>
            <view>账户余额：<text style="color: red;font-size: 30rpx;font-weight: bold;">{{userInfo.money}}</text></view>
          </view>
          <u-icon @click="toSetting" name="setting" color="#333" size="36"></u-icon>
        </view>
      </view>
      <view class="header" v-if="!userInfo.id">
        <view @click="toLogin">请先登录</view>
      </view>
    </view>

    <view class="order" hover-class="none" hover-stop-propagation="false">
      <view v-for="tab in tabs" class="tab" @click="toOrder(tab)">
        <image class="img" :src="`/static/images/wyf/${tab.img}.png`"></image>
        <view class="text">{{ tab.text }}</view>
      </view>
    </view>
    <view class="order2" hover-class="none" hover-stop-propagation="false">
      <view>我的服务</view>
      <view class="order22">
        <view class="tab" @click="addPrice">
          <image class="img" src="/static/images/wyf/充值.png"></image>
          <view class="text">会员充值</view>
        </view>
        <view class="tab" @click="addLocation">
          <image class="img" src="/static/images/wyf/待收货.png"></image>
          <view class="text">地址管理</view>
        </view>
        <!-- <view class="tab" @click="lianxi">
          <image class="img" src="/static/images/wyf/联系客服.png"></image>
          <view class="text">联系客服</view>
        </view>
        <view class="tab" @click="zixun">
          <image class="img" src="/static/images/wyf/咨询建议.png"></image>
          <view class="text">咨询建议</view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import {
  getUser
} from "../../api/system/api";
export default {
  data() {
    return {
      userInfo: {},
      tabs: [
        {
          img: '待发货',
          type: '待服务',
          text: '待服务'
        },
        {
          img: '待收货',
          type: '已完成',
          text: '已完成'
        },
        {
          img: '待评价',
          type: '服务中',
          text: '服务中'
        },
        {
          img: '退换货',
          type: '已退换',
          text: '售后'
        },
        {
          img: '全部订单',
          type: '',
          text: '全部'
        }
      ]
    };
  },
  onShow() {
    console.log(111)
    uni.getStorage({     
      key:'userInfo',
      success: (res) => {
        this.userInfo = res.data;
        // 获取用户信息
        getUser(this.userInfo.id).then(user => {
          console.log(user)
          this.userInfo = user.data
        })
      }
    })
  },
  methods: {
    toLogin() {
			this.$u.route('/pages/interest/login')
    },
    toSetting() {
      this.$u.route('/pages/manage/setting', {
        userInfo: JSON.stringify(this.userInfo)
      })
    },
    toOrder(item) {
      console.log(item)
      this.$u.route('/pages/order/orderList', {
        item: JSON.stringify(item)
      })
    },
    addLocation() {
      if (!this.userInfo.id) {
        this.$refs.uToast.show({
          title: '请先登录',
          type: 'error',
        })
        return
      }
      this.$u.route("/pages/interest/passList");
    },
    addPrice() {
      if (!this.userInfo.id) {
        this.$refs.uToast.show({
          title: '请先登录',
          type: 'error',
        })
        return
      }
      this.$u.route("/pages/user/chongzhi", {
        userInfo: JSON.stringify(this.userInfo),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fafafa;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;

  .img {
    width: 40rpx;
    height: 40rpx;
  }
}



.top {
  width: 100%;
  padding-top: 2vh;

  .header {
    display: flex;
    align-items: center;
    padding: 30rpx;

    .avatar {
      width: 140rpx;
      height: 140rpx;
      line-height: 140rpx;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      margin-right: 30rpx;
    }

    .unlogin .avatar {
      background: #7d8e8e;
    }
  }
}
.order {
  width: 94%;
  height: 150rpx;
  margin: 30rpx 3%;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 4rpx 5rpx 19rpx 4rpx lightgrey;
  display: flex;
  padding-top: 20rpx;
  justify-content: space-around;

  .tab {
    .img {
      width: 60rpx;
      height: 60rpx;
      margin-left: 20rpx;
    }
    .text {
      width: 100rpx;
      text-align: center;
      color: #666;
      font-size: 20rpx;
      margin-top: 10rpx;
    }
  }
}
.order2 {
  width: 94%;
  height: 200rpx;
  margin: 30rpx 3%;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 4rpx 5rpx 19rpx 4rpx lightgrey;
  padding: 20rpx 30rpx;
}
.order22 {
  display: flex;
  padding-top: 20rpx;
  gap: 30rpx;
  .tab {
    .img {
      width: 60rpx;
      height: 60rpx;
      margin-left: 20rpx;
    }
    .text {
      width: 100rpx;
      text-align: center;
      color: #666;
      font-size: 20rpx;
      margin-top: 10rpx;
    }
  }
}
</style>
